<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>家庭主题设计</title>
        <style media="screen">
            body,td,th {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 50px;
                margin: 0;
            }
            /* 顶栏导航 */
            .navigation {
                width: 100%;
                background-color: #069163;
                position: fixed;
                z-index: 5;
                display: flex;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
            }
            .navigation a {
                flex:1;
                text-align: center;
                text-decoration: none;
                color: white;
                padding: 10px;
            }
            /* 标题 */
            .top {
                background-color: #00cc88;
                width:100%;
                overflow: auto;
                margin: 0;
            }
            .top_title {
                padding-top: 90px;
                padding-left: 30px;
                font-size: 90px;
                font-weight: 900;
                margin-top: 50px;

            }
            .top p {
                color: white;
                padding-left: 30px;
                padding-bottom: 30px;
                font-size: 40px;
            }
            /* 代码链接部分 */
            .code {
                width:33%;
                margin-left: 62%;
                margin-top: 20px;
                margin-bottom: 20px;
                background-color: #ff9900;
                border-radius:35px;
                height:70px;
                text-align: center;
            }
            .code a {
                text-decoration: none;
                color: white;
                padding-left: 20px;
            }
            /* 小标题 */
            .titleSecond {
                margin-top: 50px;
                margin-bottom: -50px;
                margin-left: 30px;
            }
            .title_back {
                background-color: #ff9933;
                width: 10%;
                height: 70px;
                position: relative;
                left: -5%;
                border-radius: 16px;
            }
            .title_name {
                position: relative;
                top:-70px;
                font-weight: 600;
                font-size: 60px;
                line-height: 70px;

            }
            /* 设计理念 */
            .notion {
                position: relative;
                width:100%;
                display: flex;
                justify-content: center;
            }

            .notion_content {
                width:90%;
                margin:20px;
            }
            .notion_show {
                cursor:pointer;
                width: 100%;
                height:120px;
                background-color:#069163;
                border-radius: 25px;
                border: 5px solid white;
                box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4);
                display: flex;

            }
            .notion_text {
                text-align: left;
                padding-left: 10%;
                line-height: 120px;
                color:white;
                font-size: 60px;
                font-weight: 500;
                width: 75%;

            }
            .icon-xiala {
                margin: 20px;
                transform: rotateX(0deg);
            }
            .notion_hide p{
                margin: 0% 2%;
                display:block;
                color:#666666;
            }
            .notion_hide {
                margin: 0 auto;
                width: 95%;
                display:none;
                border:5px solid #069163;
                border-radius: 0px 0px 16px 16px;
                border-top: none;
            }
            /* 使用流程 */
            .process_title {
                background-color:#069163;
                height: 120px;
                border-radius: 20px;
                font-size: 50px;
                font-weight: 700;
                color: white;
                line-height: 120px;
                padding-left: 5%;
                margin: 2%;
                margin-bottom: 0;
            }
            .process_content {
                margin-left: 2%;
                margin-right: 2%;
                padding: 2%;
                margin-bottom: 3%;
                background-color: #e4fff6;
                border-radius: 20px;
            }
            /* 项目目录 */
            .project {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            a {
                z-index: 5;
                text-decoration: none;
                color: black;
                margin-top: 10px;
                margin-bottom: 10px;
                width: 90%;
            }
            img {
                width: 100%;
            }
        </style>
        <!-- iconfont -->
        <link rel="stylesheet" href="css/iconfont/iconfont.css">
    </head>
    <body>
        <!-- 顶栏 -->
        <div class="navigation">
            <a href="http://www.yueqingyang.ink/first">上一个</a>
            <a href="http://www.yueqingyang.ink/">首页</a>
            <a href="http://www.yueqingyang.ink/second_1">下一个</a>
        </div>
        <!-- 标题 -->
        <div class="top">
            <div class="top_title">
                家庭主题设计
            </div>
            <p>--以设计方法解决生活问题</p>
        </div>
        <!-- 码云链接 -->
        <div class="code">
            <a href="https://gitee.com/yue-qingyang/portfolio-project">代码细节></a>
        </div>
        <!-- 设计理念 -->
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                1 设计理念
            </div>
        </div>
        <div class="notion" >

            <div class="notion_content">
                <div class="notion_show">
                    <div class="notion_text">哈哈哈哈哈哈</div>
                    <span class="iconfont icon-xiala"></span>
                </div>
                <div class="notion_hide">
                    <p>嗯呢讷讷恩额额呢恩恩额嗯呢恩恩额</p>
                </div>
            </div>
        </div>

        <!-- 使用流程 -->
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                2 项目流程
            </div>
        </div>
        <div class="process_box">
            <div class="process_title">
                ${name}
            </div>
            <div class="process_content">
                ${content}
            </div>
        </div>
        <div class="titleSecond">
            <div class="title_back"></div>
            <div class="title_name">
                3 项目目录
            </div>
        </div>
        <div class="project">
            <a href="http://www.yueqingyang.ink/second_1" class = "width_second">
                <img src="img/00_index/family_top.png" alt="" >
            </a>
            <a href="http://www.yueqingyang.ink/second_2" class = "width_second">
                <img src="img/00_index/family_top2.png" alt="" >
            </a>
            <a href="http://www.yueqingyang.ink/second_3" class = "width_second">
                <img src="img/00_index/family_top3.png" alt="" >
            </a>
            <a href="http://www.yueqingyang.ink/second_4" class = "width_second">
                <img src="img/00_index/family_top4.png" alt="" >
            </a>
        </div>


        <!-- 内容伸展 -->
        <script type="text/javascript">
            function g(Class) {
                var x = document.getElementsByClassName(Class);
                return x[0];
            }
            window.onload = function(){
                // nav对象有了一个click时，运行函数
                g("notion_content").onclick = function(e){
                    // e 是返回的事件，提供了一系列内容
                    var src = e?e.target:event.srcElement;
                    if(src.className == "notion_text" || "iconfont icon-xiala"){
                        // 获取 父节点，然后获取父节点的下一个兄弟节点
                        var parent = src.parentNode
                        var next = parent.nextElementSibling || parent.nextSibling;
                        next.style.display = (next.style.display =="block")?"none":"block";
                        var last = parent.lastElementChild
                        last.style.transform = (last.style.transform == "rotateX(180deg)")? "rotateX(0deg)":"rotateX(180deg)";
                    }
                 }
            }
        </script>
        <!-- 请求数据 -->
        <script type="text/javascript">
            //创建一个 ajax 对象
            // 参数是一个请求
            var ajax = function(request) {
                // request “请求”是一个对象，有以下属性
                // method:请求方法，string
                // url: 请求路径, string
                // data: 发送的请求数据(非GET方法), string
                // callback: 处理请求的回调函数, function
                var r = new XMLHttpRequest()
                r.open(request.method, request.url, true)
                //内容类型
                if (request.contentType !== undefined) {
                    r.setRequestHeader('Content-Type', request.contentType)
                }
                r.onreadystatechange = function(event) {
                    if(r.readyState === 4) {
                        request.callback(r.response)
                    }
                }
                // 判断是get要数据，还是post发数据
                if (request.method === "GET") {
                    r.send()
                } else {
                    r.send(request.data)
                }
            }



            // 插入notion
            var insertNotion = function(contents) {
                var html = ''
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]
                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <div class="notion_show">
                        <div class="notion_text">${name}</div>
                        <span class="iconfont icon-xiala"></span>
                    </div>
                    <div class="notion_hide">
                        <p>${content}</p>
                    </div>
                    `
                    html += inserthtml
                }
                var div = g("notion_content")
                div.innerHTML = html
            }
            var getNotion = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/2/notion",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertNotion(temp)
                    }
                }
                ajax(request)
            }
            // 插入process
            var insertProcess = function(contents) {
                var html = ''
                var fatherDiv = g("pointContainer")
                for (var i = 0; i < contents.length; i++) {
                    var b = contents[i]

                    var name = b.name
                    var content = b.content
                    var inserthtml = `
                    <div class="process_title">
                        ${name}
                    </div>
                    <div class="process_content">
                        ${content}
                    </div>
                    `
                    html += inserthtml
                }
                var div = g("process_box")
                div.innerHTML = html
            }
            var getProcess = function() {
                // ajax发请求
                var request = {
                    method: "GET",
                    url: "/api/2/process",
                    contentType: "application/json",
                    callback: function(response) {
                        var temp = JSON.parse(response)
                        insertProcess(temp)
                    }
                }
                ajax(request)
            }
            getNotion()
            getProcess()

        </script>
    </body>
</html>
